<template>
	<Dialog :title="dialogTitle" v-model="dialogVisible">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
			<!-- el-form-item label="组织名称" prop="deptName">
        <el-input v-model="formData.deptName" placeholder="请输入组织名称" />
      </el-form-item>
      <el-form-item label="组织代码" prop="deptCode">
        <el-input v-model="formData.deptCode" placeholder="请输入组织代码" />
      </el-form-item>
      <el-form-item label="汇报组织名称" prop="reportDeptName">
        <el-input v-model="formData.reportDeptName" placeholder="请输入汇报组织名称" />
      </el-form-item>
      <el-form-item label="汇报组织代码" prop="reprotDeptCode">
        <el-input v-model="formData.reprotDeptCode" placeholder="请输入汇报组织代码" />
      </el-form-item> -->
			<el-form-item label="组织名称" prop="deptName">
				<el-input v-model="formData.deptName" placeholder="点击选择组织名称" @click="showDrawer('deptCode')" readonly
					:suffix-icon="Search" />
			</el-form-item>
			<el-form-item label="汇报组织名称" prop="reportDeptName">
				<el-input v-model="formData.reportDeptName" placeholder="点击选择组织名称" @click="showDrawer('reprotDeptCode')" readonly
					:suffix-icon="Search" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
	<el-drawer v-model="drawer" title="组织选择" direction="rtl">
		<DeptTree @node-click="handleDeptNodeClick" />
	</el-drawer>
</template>
<script setup lang="ts">
	import DeptTree from '../user/DeptTree.vue'
	import { ReportingLineApi, ReportingLine } from '@/api/system/reportingline'
	import { Search } from '@element-plus/icons-vue'

	/** 公司关系 表单 */
	defineOptions({ name: 'ReportingLineForm' })

	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		id: undefined,
		deptName: undefined,
		deptCode: undefined,
		reportDeptName: undefined,
		reprotDeptCode: undefined,
	})
	const formRules = reactive({
		deptName: [{ required: true, message: '组织名称不能为空', trigger: 'blur' }],
		deptCode: [{ required: true, message: '组织代码不能为空', trigger: 'blur' }],
		reportDeptName: [{ required: true, message: '汇报组织名称不能为空', trigger: 'blur' }],
		reprotDeptCode: [{ required: true, message: '汇报组织代码不能为空', trigger: 'blur' }],
	})
	const drawer = ref(false)
	const drawerType = ref('')
	const formRef = ref() // 表单 Ref

	/** 打开弹窗 */
	const open = async (type : string, id ?: number) => {
		dialogVisible.value = true
		dialogTitle.value = t('action.' + type)
		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await ReportingLineApi.getReportingLine(id)
			} finally {
				formLoading.value = false
			}
		}
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	// 打开部门选择
	const showDrawer = (type) => {
		drawerType.value = type
		drawer.value = true
	}
	/** 处理部门被点击 */
	const handleDeptNodeClick = async (row : any) => {
		if(drawerType.value==='deptCode'){
			if (row === undefined) {
				formData.value.deptName = undefined
				formData.value.deptCode = undefined
			} else {
				formData.value.deptName = row.name
				formData.value.deptCode = row.id
			}
		}else{
			if (row === undefined) {
				formData.value.reportDeptName = undefined
				formData.value.reprotDeptCode = undefined
			} else {
				formData.value.reportDeptName = row.name
				formData.value.reprotDeptCode = row.id
			}
		}
		drawer.value = false
	}
	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		await formRef.value.validate()
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as ReportingLine
			if (formType.value === 'create') {
				await ReportingLineApi.createReportingLine(data)
				message.success(t('common.createSuccess'))
			} else {
				await ReportingLineApi.updateReportingLine(data)
				message.success(t('common.updateSuccess'))
			}
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: undefined,
			deptName: undefined,
			deptCode: undefined,
			reportDeptName: undefined,
			reprotDeptCode: undefined,
		}
		formRef.value?.resetFields()
	}
</script>